import React, { useState, useEffect } from 'react';
import { View, Image, Text } from '@tarojs/components';
import { DynamicColors, GStyleSheet } from '@/utils/DarkMode';
import global from '@/utils/global';
import Modal from '@/components/Modal';
import { GButton } from '@/components/GButton';
import i18n from 'i18n-js';

const warnIcon =
  'https://xbgroup-1251025085.cos.ap-guangzhou.myqcloud.com/cybertron/users/495101/media/icon_offline_time_out%403x_1677491746965.png';

const dstyles = GStyleSheet.create({
  container: {
    display: 'flex',
    flex: 1,
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
  },
  windows: {
    backgroundColor: DynamicColors.cardBackgroundColor,
    borderRadius: 10,
    width: 280,
  },
  title: {
    padding: 20,
    paddingTop: 30,
  },
  warnIcon: {
    width: 90,
    height: 90,
    marginBottom: 8,
  },
  titleText: {
    fontSize: 20,
    fontWeight: '500',
    textAlign: 'center',
  },
  content: {
    padding: 20,
    paddingTop: 0,
    paddingBottom: 30,
    display: 'flex',
    flexDirection: 'column',
  },
  tipText: {
    fontSize: 15,
    color: DynamicColors.titleTextColor,
    paddingTop: 0,
    paddingBottom: 5,
    textAlign: 'center',
  },
  line: {
    borderWidth: 0.2,
    borderStyle: 'solid',
    borderColor: 'rgba(239, 239, 239, 1)',
  },
  btn: {
    width: '100%',
    borderWidth: 0,
    height: 55,
  },
});

const DeviceNotResponseModal: React.FC = () => {
  const styles = dstyles.useDynamicStyle();
  const [show, setShow] = useState<boolean>(false);

  useEffect(() => {
    global.deviceNotResponseModal = { show: showModal };
    // setTimeout(() => {
    //   setShow(true);
    // }, 3000);
  }, []);

  const showModal = () => {
    if (!show) {
      setShow(true);
    }
  };

  const closeModal = () => {
    setShow(false);
  };

  const renderLineText = text => {
    const styles = dstyles.useDynamicStyle();
    return (
      <View
        style={{
          display: 'flex',
          flexDirection: 'row',
          width: 240,
          alignItems: 'center',
          justifyContent: 'center',
        }}>
        <Text style={{ ...styles.tipText, fontSize: 7, top: 3 }}>●</Text>
        <Text style={{ ...styles.tipText, paddingLeft: 12 }}>{text}</Text>
      </View>
    );
  };

  return (
    <Modal visible={show} mask>
      <View style={styles.container}>
        <View style={styles.windows}>
          <View style={styles.title}>
            <View style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
              <Image src={warnIcon} style={styles.warnIcon} />
              <Text style={styles.titleText}>{i18n.t('DEVICE_NO_RESPONSE')}</Text>
            </View>
          </View>
          <View style={styles.content}>
            <Text style={styles.tipText}>{i18n.t('PLEASE_CHECK_AND_RETRY')}</Text>
            {renderLineText(i18n.t('DEVICE_NORMAL_NETWORK_OPERATION'))}
            {renderLineText(i18n.t('MOBILE_NETWORK_CONNECTION_IS_SMOOTH'))}
          </View>
          {/* <View style={styles.line} /> */}
          <GButton text={i18n.t('CLOSE')} onPress={closeModal} fontSize={16} style={styles.btn} primary />
        </View>
      </View>
    </Modal>
  );
};

export default DeviceNotResponseModal;
